<template>
  <div class="blog-content">
    <h2> {{ blog.title }}</h2>
    <div v-if="hasLogin">
    <router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}" style="margin-right: 5px;">
      <el-button>编辑</el-button>
    </router-link>
    <el-button @click="deleteBlog">删除</el-button>
    </div>
    <el-divider></el-divider>
    <div v-html="blog.content"></div>
  </div>
</template>

<script>
import * as constConfig from "../constData/ConstData";
import 'github-markdown-css'

export default {
  name: "BlogDetail",
  data() {
    return {
      blog: {},
      hasLogin: false
    }
  },
  methods:{
    deleteBlog(){
      this.$axios.delete(constConfig.prefixApi + "/deleteBlog/" + this.blog.id).then(()=>{
        this.$router.replace({path:"/"})
      })
    }
  },
  created() {
    if (localStorage.getItem(constConfig.tokenHeader)) {
      this.hasLogin = true
    }
    const blogId = this.$route.params.blogId
    this.$axios.get(constConfig.prefixApi + "/blog/" + blogId).then(res => {
      const blog = res.data.data
      this.blog.id = blog.id
      this.blog.title = blog.title
      const md = this.markdown
      this.blog.content = md.render(blog.content)
    })
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>